<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
      1. 条件展示指令： v-show,如果条件是false,那么它会给绑定指令的元素加个 display: none;  <hr/>
      <p v-show="flag"> 123 </p>
      2. 条件渲染型指令 v-if  v-else  v-else-if  控制的是原生的创建和销毁 <hr/>
      案例一： 单路分支 <hr/>
      <p v-if="f"> 单路分支 </p>
      案例二： 双路分支 <hr/>
      <p v-if="g"> 真 </p>
      <p v-else> 假 </p>
      案例三： 多路分支 <hr/>
      <p v-if="grade >= 0 && grade < 60">不及格</p>
      <p v-else-if="grade>=60 && grade < 80">良好</p>
      <p v-else>优秀</p>
  </div>
</body>
<script src="../../lib/vue.global.js"></script>
<script>
  /* 
    总结
        v-show  vs  v-if 

        1. 如果是频繁的进行内容的切换，使用v-show
        2. 如果不进行频繁的切换，使用v-if 
        3. 如果有多路分支存在，则一定用v-if 

        如果初始条件为 false,  v-show 和 v-if 谁的性能更好
        性能损耗更多是v-show ,因为v-show必须创建元素，并且操作display: none
  */
  Vue.createApp({
    data () {
      return {
        flag: false,
        f: false,
        g: false,
        grade: 30
      }
    }
  }).mount('#app')
</script>
</html>